<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../brand-font/iconfont.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/index1.css">
    <!-- <link rel="stylesheet" href="../css/login-form.css"> -->
    <link rel="stylesheet" href="../css/goods.css">
    <script src="../js/jquery.js"></script>
    <!-- <script src="../js/confirm.js"></script> -->
    <!-- <script src="../js/login.js"></script> -->
    <script src="../js/header.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        $(function() {
            if (!cookie.get('isLogin')) { //判断是否登录
                $('.reg').on('click', function() {
                    location.href = 'login.html';
                })
                $('.slide-login').on('click', function() {
                    location.href = "login.html";
                })
            } else {
                var phoneUser = cookie.get('user');
                var before = phoneUser.slice(0, 3);
                var after = phoneUser.slice(6, -1);
                $('.reg').html(before + '****' + after);
                $('.reg').on('click', function() {
                    location.href = 'userInfo.html';
                })
                $('.slide-login').on('click', function() {
                    location.href = "userInfo.html";
                })
            }
            let id = location.search.split('=')[1]; // 获得id
            // console.log(id);
            $.ajax({
                type: "get",
                url: "../php/getId.php",
                data: {
                    id: id
                },
                dataType: "json",
                success: function(data) {
                        let pic = JSON.parse(data.src);
                        console.log(pic);
                        let price = JSON.parse(data.price);
                        let size = JSON.parse(data.size);
                        // console.log(size);

                        let titleHead = data.title.split('|'); //男装
                        console.log(titleHead);
                        console.log(pic);

                        let tempstr = `
                    <p class="direct">
                <span>${titleHead[0]}</span>
                <i>&gt;</i>
                <span>裤子</span>
                <i>&gt;</i>
                <span>${titleHead[1]}</span>
            </p>
            <ul class="sma-pic">
            </ul>
            <div class="big-box">
                <img src="${pic[2]['0']}" alt="" class="big">
                <img src="${pic[3]['0']}" alt="" class="lbig">
            </div>
            <div class="buy">
                <h4>超值购</h4>
                <h2>${data.title}</h2>
                <p class="number">款号：${data.number}</p>
                <div class="activity">
                    <span>活动</span>
                    <div>
                        <p>· Gap全场消费满300减30，满400减80</p>
                        <p>· 全场包邮</p>
                    </div>
                </div>
                <div class="price">
                    <i>￥${price[0].now}</i><del>￥${price[0].before}</del>
                </div>
                <div class="color">
                    <p>颜色：<em>${data.color}</em></p>
                </div>
                <p class="size">尺码：</p>
                <ul class="sizeList">
                </ul>
                <p class="sum">数量:<em>1</em></p>
                <div class="sum-change">
                    <em>-</em><span>1</span><em>+</em>
                </div>
                <div class="btn-box">
                    <button class="addCar">加入购物车</button>
                    <button class="purchase">立即购买</button>
                </div>
            </div>
                    `;
                        $('.goodPage>.inner').append(tempstr); //插入所有
                        var smPic = '';
                        for (var item in pic[1]) { //列表图片遍历插入
                            // console.log(pic[1][i]);
                            smPic += `<li><img src="${pic[1][item]}" alt=""></li>`;
                        }
                        $('.sma-pic').append(smPic);
                        var sizeStr = '';
                        for (var item in size[0]) { //列表尺寸遍历插入
                            sizeStr += `<li>${size[0][item]}</li>`;
                        }
                        $('.sizeList').append(sizeStr);
                        //点击li换图片
                        //加减数量操作
                        $('.sum-change>em').on('click', function() {
                            var index = $('.sum-change>em').index(this);
                            // console.log(index);
                            var val = parseInt($('.sum-change>span').html());
                            if (index == 0) { //减操作的索引值
                                if (val > 1) {
                                    val--;
                                    // console.log(val);
                                    $('.sum-change>span').html(val);
                                    $('.sum>em').html(val);
                                }
                            } else if (index == 1) { //加操作的索引值
                                val++;
                                // console.log(val);
                                $('.sum-change>span').html(val);
                                $('.sum>em').html(val);
                            }
                        })
                        $('.goodPage>.inner').find('.addCar').on('click', function() {
                            addGoods(data.id, price[0].now, $('.sum-change>span').html());
                            location.href = 'shopCar.html';
                        });
                        //将商品信息存入cookie
                        function addGoods(id, price, num) {
                            var shop = cookie.get('shop'); //获取cookie
                            console.log(shop);
                            var product = {
                                id: id,
                                price: price,
                                num: num
                            };

                            if (shop) {
                                shop = JSON.parse(shop);
                                if (shop.some(elm => elm.id == id)) {
                                    shop.forEach(elm => {
                                        elm.id == id ? elm.num = num : null;
                                    });
                                } else {
                                    shop.push(product);
                                }
                            } else {
                                shop = [];
                                shop.push(product);
                                console.log(product);
                            }
                            cookie.set('shop', JSON.stringify(shop), 1);

                        }

                        //开始li的一些移动和放大镜效果
                        $('.big-box').on('mouseover', function() {
                            $('.big').hide();
                            $('.lbig').show();
                            $('.big-box').on('mousemove', function(ev) {
                                var left = ev.pageX - $('.big-box').offset().left;
                                var top = ev.pageY - $('.big-box').offset().top;
                                $('.lbig').css({
                                    top: -top + 'px',
                                    left: -left + 'px',
                                })
                            })
                        })

                        // 鼠标移除大图消失
                        $('.big-box').on('mouseout', function() {
                                $('.lbig').hide();
                                $('.big').show();
                            })
                            // 选项卡
                        $('.sma-pic>li').on('click', function(ev) {
                            var index = $('.sma-pic>li').index(this);
                            $(this).css({
                                'border-bottom': '4px solid #113382'
                            }).siblings().css({
                                'border-bottom': '4px solid transparent'
                            });
                            // 点击换图片
                            // console.log(pic[2][index]); //box中对应li的图片
                            $('.big')[0].src = pic[2][index];
                            $('.lbig')[0].src = pic[3][index];
                        })
                    } //success结束
            });

        })
    </script>
    <!-- <script src="../js/goodInfo.js"></script> -->

</head>

<body>
    <div class="header">
        <div class="header-top">
            <div class="inner">
                <ul class="sm-logo">
                    <li class="gap-logo">
                        <a href="#"><i class="iconfont">&#xe6c9;</i></a>
                    </li>
                    <li class="old-logo">
                        <a href="javascript:;"><i class="iconfont">&#xe622;</i></a>

                    </li>
                </ul>
                <strong>
                    全场免运 | 正价商品退换货包邮
                    <a href="javascript:;" style="color: #fff">查看详情</a>
                </strong>
                <div class="service">
                    <span>售后服务热线 400-680-8517</span>
                    <span class="concustomer">
                        <i class="iconfont">&#xe609;</i>
                        <span>在线客服</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="fixed">
            <div class="header-logo">
                <div class="inner">
                    <div class="gap"><a href="javascript:;"><i class="iconfont">&#xe6c9;</i></a>
                        <div class="login">
                            <div class="login-top">
                                <span class="reg"><i class="iconfont">&#xe604;</i>注册/登录</span>
                                <span class="shopbag"><i class="iconfont">&#xe602;</i>我的购物袋</span>
                            </div>
                            <form class="search"><input type="text" placeholder="搜索关键词"><i class="iconfont">&#xe6e8;</i></form>
                        </div>
                        <div class="login-slideUp">
                            <span><i class="iconfont slide-search">&#xe6e8;</i></span><i class="iconfont slide-login">&#xe604;</i><i class="iconfont slide-bag">&#xe602;</i>
                        </div>
                    </div>
                </div>
            </div>
            <section class="nav">
                <div class="inner hei">
                    <ul>
                        <li>
                            <a href="javascript:;" style="padding-left: 0;">首页</a>
                        </li>
                        <li>
                            <a href="javascript:;">新品</a>
                            <div class="subnav">
                                <ul>
                                    <li><a href="#">分类索引</a></li>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">男装</a></li>
                                    <li><a href="#">女幼</a></li>
                                    <li><a href="#">男幼</a></li>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">女婴</a></li>
                                    <li><a href="#">男婴</a></li>
                                    <li><a href="#">GapFit</a></li>
                                    <li><a href="#">Sale</a></li>
                                    <li><a href="#">孕妇装</a></li>
                                </ul>
                                <div>
                                    <a href="#"><img src="../img/img/index/700F0B3AB07A9B9A947939201E5DE44E.jpg" alt=""></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">女装</a>
                        </li>
                        <li>
                            <a href="javascript:;">男装</a>
                        </li>
                        <li>
                            <a href="javascript:;">女孩</a>
                        </li>
                        <li>
                            <a href="javascript:;">男孩</a>
                        </li>
                        <li>
                            <a href="javascript:;">幼儿（1-5岁)</a>
                        </li>
                        <li>
                            <a href="javascript:;">婴儿（0-24个月)</a>
                        </li>
                        <li>
                            <a href="javascript:;">孕妇装</a>
                        </li>
                        <li>
                            <a href="javascript:;">GapFit</a>
                        </li>
                        <li>
                            <a href="javascript:;" style="padding-right: 0;">Sale</a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <div class="goodPage">
        <div class="inner">
            <!-- <p class="direct">
                <span>男装</span>
                <i>&gt;</i>
                <span>针织衫/毛衣</span>
                <i>&gt;</i>
                <span>男装|渐变风格撞色套头针织衫</span>
            </p>
            
            <ul class="sma-pic">
                <li><img src="../img/img/goods/1.jpg" alt=""></li>
                <li><img src="../img/img/goods/2.jpg" alt=""></li>
                <li><img src="../img/img/goods/3.jpg" alt=""></li>
                <li><img src="../img/img/goods/4.jpg" alt=""></li>
                <li><img src="../img/img/goods/5.jpg" alt=""></li>
            </ul>
            <div class="big-box">
                <img src="../img/img/goods/b1.jpg" alt="" class="big">
                <img src="../img/img/goods/lb1.jpg" alt="" class="lbig">
            </div>
            <div class="buy">
                <h4>超值购</h4>
                <h2>男装|渐变风格撞色套头针织衫</h2>
                <p class="number">款号：000474795</p>
                <div class="activity">
                    <span>活动</span>
                    <div>
                        <p>· Gap全场消费满300减30，满400减80</p>
                        <p>· 全场包邮</p>
                    </div>
                </div>
                <div class="price">
                    <i>￥399.00</i><del>￥499.00</del>
                </div>
                <div class="color">
                    <p>颜色：<em>蓝色渐变</em></p>
                </div>
                <p class="size">尺码：</p>
                <ul class="sizeList">
                    <li>175/88A(XS)</li>
                    <li>175/92A(S)</li>
                    <li>180/96A(M)</li>
                    <li>185/104A(L)</li>
                    <li>185/108A(XL)</li>
                    <li>185/124A(XXL)</li>
                </ul>
                <p class="sum">数量:<em>11</em></p>
                <div class="sum-change">
                    <em>-</em><span></span><em>+</em>
                </div>
                <div class="btn-box">
                    <button class="addCar">加入购物车</button>
                    <button class="purchase">立即购买</button>
                </div>
            </div> -->
        </div>

    </div>
    <footer>
        <div class="inner footer-height ">
            <div class="new ">
                <p>BE THE FIRST TO KNOW</p>
                <p>第一时间获取Gap最新资讯</p>
            </div>
            <form action=" " class="ema ">
                <input type="email " name=" " id=" " placeholder="输入您的电子邮箱地址 ">
                <i class="iconfont ">&#xe696;</i>
            </form>
            <div class="focus ">
                <span>关注我们</span>
                <i class="iconfont ">&#xe6a5;</i>
                <i class="iconfont ">&#xe675;</i>
            </div>
            <div class="online ">
                <p><i class="iconfont ">&#xe609;</i>在线客服</p>
                <p>服务时间:10:00-22:00</p>
            </div>
        </div>
        <div class="info inner ">
            <ul>
                <li>
                    用户支持
                </li>
                <li>
                    <a href="javascript:; ">新手上路</a>
                </li>
                <li>
                    <a href="javascript:; ">会员服务</a>
                </li>
                <li>
                    <a href="javascript:; ">退换货政策</a>
                </li>
                <li>
                    <a href="javascript:; ">支付配送</a>
                </li>
                <li>
                    <a href="javascript:; ">帮助中心</a>
                </li>

            </ul>
            <ul>
                <li>
                    关于Gap
                </li>
                <li>
                    <a href="javascript:; ">联系我们</a>
                </li>
                <li>
                    <a href="javascript:; ">隐私条款</a>
                </li>
                <li>
                    <a href="javascript:; ">加入我们</a>
                </li>
                <li>
                    <a href="javascript:; ">品牌故事</a>
                </li>

            </ul>
            <ul class="websit ">
                <li>网站咨询</li>
                <li>
                    <p>订购热线：400-690-5151</p>
                    <p>服务时间:10:00-22:00</p>
                </li>
                <li>
                    <p>售后服务热线: 400-680-8517</p>
                    <p>服务时间:10:00-19:00</p>
                </li>
            </ul>
            <div class="console ">
                <div>
                    <p>门店查询</p>
                    <img src="../img/img/index/FOOTER_store.06dde1c909439e219a92dd4dc27f63b4.jpg " alt=" " srcset=" ">
                </div>
                <h6><a href="javascript ">立即查询</a></h6>
                <div>
                    <span>门店售后电话：021-60934300</span>
                </div>
            </div>
            <div class="find-card ">
                <div class="find ">
                    <p>Gap企业服务/团购</p>
                    <h6><a href="javascript ">立即查询</a></h6>
                </div>
                <div class="card ">
                    <p>Gap礼品卡购买/激活</p>
                    <img src="../img/img/index/gift-card@2x.f1200d8e0f844dc203595f91531e6fa9.png " alt=" ">
                </div>
            </div>
            <div class="download ">
                <p>下载Gap APP</p>
                <img src="../img/img/index/qrcode@2x.10ee7de6775e788bf18eac477241d932.png " alt=" " srcset=" ">
            </div>
        </div>
        <div class="foot-script inner ">
            <p>Gap全球站点： United States|Canada|Japan|Europe</p>
            <p>沪ICP备10200002号|沪公网备31010602000818|上海工商</p>
            <p>浏览该网站表示您接收并同意我们使用cookies为您提供个性化的浏览体验。如需更改管理，请点击 <a href="javascript:; ">隐私条款</a>&nbsp; 了解详情</p>
            <p>© 2019 Gap Inc.</p>
        </div>
    </footer>
    <div class="returnTop "><a class="iconfont " href="# ">&#xe643;</a></div>
</body>

</html>